<template>
  <div class="cmt-container">
    <!-- 评论列表 -->
    <van-list v-model="loading" :finished="done" @load="pullUpLoadMoreFn" :immediate-check="false" finished-text="没有更多了"
      offset="50">
      <div class="cmt-list">
        <!-- 评论的 Item 项 -->
        <div class="cmt-item" v-for="item in commentList" :key="item.com_id">
          <!-- 头部区域 -->
          <div class="cmt-header">
            <!-- 头部左侧 -->
            <div class="cmt-header-left">
              <img :src="item.aut_photo" alt="" class="avatar">
              <span class="uname">{{item.aut_name}}</span>
            </div>
            <!-- 头部右侧 -->
            <div class="cmt-header-right">
              <van-icon name="like" size="16" color="red" v-if="item.is_liking" @click="likeOrDislikeCommentFn(item)" />
              <van-icon name="like-o" size="16" color="gray" v-else @click="likeOrDislikeCommentFn(item)" />
            </div>
          </div>
          <!-- 主体区域 -->
          <div class="cmt-body">
            {{item.content}}
          </div>
          <!-- 尾部区域 -->
          <div class="cmt-footer">{{formatTimeAgoFn(item.pubdata)}}</div>
        </div>
      </div>
    </van-list>

    <!-- 底部添加评论区域 - 1 -->
    <div class="add-cmt-box van-hairline--top" v-if="showCmtTop">
      <van-icon name="arrow-left" size="0.48rem" @click="$router.back()" />
      <div class="ipt-cmt-div" @click="showCmtTop=false">发表评论</div>
      <div class="icon-box">
        <van-badge :content="totalCount" :max="99" @click.native="scrollToViewFn">
          <van-icon name="comment-o" size="0.53333334rem" />
        </van-badge>
        <van-icon v-if="artObj.is_collected" @click="toggleCollectFn" name="star" size="0.53333334rem" />
        <van-icon v-else name="star-o" size="0.53333334rem" />
        <van-icon name="share-o" size="0.53333334rem" />
      </div>
    </div>

    <!-- 底部添加评论区域 - 2 -->
    <div class="cmt-box van-hairline--top" v-else>
      <textarea v-model.trim="cmtStr" placeholder="友善评论、理性发言、阳光心灵" v-jujiao @blur="onBlurFn"
        @keydown.enter="publishCmtFn"></textarea>
      <van-button type="default" :disabled="!cmtStr" @click="publishCmtFn">发布</van-button>
    </div>
  </div>
</template>

<script>
import {
  getCommentListAPI,
  likeCmtAPI,
  dislikeCmtAPI,
  publishCmtAPI
} from '@/api/article'
import {
  Toast
} from 'vant'

export default {
  name: 'articleComment',
  data () {
    return {
      commentList: [], // 评论列表
      showCmtTop: true, // 控制评论两套标签互斥显示 true表示上层可见
      totalCount: 0, // 评论总数
      cmtStr: '',
      loading: false,
      done: false
    }
  },
  props: {
    artId: {
      type: String,
      required: true
    },
    artObj: {
      type: Object,
      required: true
    }
  },
  created () {
    this.getCommentListFn()
  },
  methods: {
    // 文本域失去焦点
    onBlurFn () {
      // 异步隐藏-先发布后，立即执行
      setTimeout(() => {
        this.showCmtTop = true
      })
    },
    // 上拉加载更多
    pullUpLoadMoreFn () {
      this.getCommentListFn()
    },
    // 获取评论列表-封装函数
    async getCommentListFn () {
      const res = await getCommentListAPI({
        artId: this.artId,
        offset: this.offset
        // 数据需要在标签中使用才需要在data声明 offset先保存在this中可以在js中使用
      })
      // console.log(res)
      const {
        results,
        total_count: totalCount,
        last_id: lastId
      } = res.data.data
      // 结束的标志
      if (lastId === null || results.length < 10) {
        // 全部评论加载完成
        this.done = true
        return
      }
      // 保存每次请求返回的last_id,给下次请求携带过去，做分页
      this.offset = lastId
      //   this.commentList = res.data.data.results
      this.commentList = [...this.commentList, ...results]
      this.totalCount = totalCount || ''
      this.loading = false
    },
    //   评论点赞或取消点赞
    async likeOrDislikeCommentFn (item) {
      // 先同步到后台
      try {
        item.is_liking ? await dislikeCmtAPI({
          comId: item.com_id
        }) : await likeCmtAPI({
          comId: item.com_id
        })
        // 再改vue数据-isLiking取反
        Toast.success(item.is_liking ? '取消点赞成功' : '点赞成功')
        item.is_liking = !item.is_liking
      } catch (e) {
        Toast.fail(item.is_liking ? '取消点赞失败' : '点赞失败')
      }
    },
    // 评论列表滚动到可视区
    scrollToViewFn () {
      document.getElementById('like-box').scrollIntoView({
        behavior: 'smooth'
      })
    },
    // 发布评论
    async publishCmtFn () {
      // 1.同步到后台
      const res = await publishCmtAPI({
        artId: this.artId,
        data: this.cmtStr
      })
      // 2.把评论内容 添加到commentList 的数组头部
      this.commentList.unshift(res.data.data.new_obj)
      // 清空内容
      this.cmtStr = ''
      setTimeout(() => {
        this.showCmtTop = true
      })
      try {
        Toast.success('发布成功')
      } catch (e) {
        Toast.fail('发布失败')
      }
    },
    // 切换收藏状态
    toggleCollectFn () {
      // 1.修改vue变量
      this.artObj.is_collected = !this.artObj.is_collected
      // 2.同步到后台
    }
  }
}

</script>

<style scoped lang="less">
  .cmt-list {
    padding: 10px 10px 46px;

    .cmt-item {
      padding: 15px 0;

      +.cmt-item {
        border-top: 1px solid #f8f8f8;
      }

      .cmt-header {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .cmt-header-left {
          display: flex;
          align-items: center;

          .avatar {
            width: 40px;
            height: 40px;
            background-color: #f8f8f8;
            border-radius: 50%;
            margin-right: 15px;
          }

          .uname {
            font-size: 12px;
          }
        }
      }

      .cmt-body {
        font-size: 14px;
        line-height: 28px;
        text-indent: 2em;
        margin-top: 6px;
        word-break: break-all;
      }

      .cmt-footer {
        font-size: 12px;
        color: gray;
        margin-top: 10px;
      }
    }
  }

  /*美化 - 文章详情 - 底部的评论页面 */
  // 外层容器
  .art-cmt-container-1 {
    padding-bottom: 46px;
  }

  .art-cmt-container-2 {
    padding-bottom: 80px;
  }

  // 发布评论的盒子 - 1
  .add-cmt-box {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    background-color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 46px;
    line-height: 46px;
    padding-left: 10px;

    .ipt-cmt-div {
      flex: 1;
      border: 1px solid #efefef;
      border-radius: 15px;
      height: 30px;
      font-size: 12px;
      line-height: 30px;
      padding-left: 15px;
      margin-left: 10px;
      background-color: #f8f8f8;
    }

    .icon-box {
      width: 40%;
      display: flex;
      justify-content: space-evenly;
      line-height: 0;
    }
  }

  .child {
    width: 20px;
    height: 20px;
    background: #f2f3f5;
  }

  // 发布评论的盒子 - 2
  .cmt-box {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    padding-left: 10px;
    box-sizing: border-box;
    background-color: white;

    textarea {
      flex: 1;
      height: 66%;
      border: 1px solid #efefef;
      background-color: #f8f8f8;
      resize: none;
      border-radius: 6px;
      padding: 5px;
    }

    .van-button {
      height: 100%;
      border: none;
    }
  }

</style>
